<!-- 商务对接-资质对接 -->
<template>
    <section class="qualification">
        <div class="cp-container bgf">
            <search-form
                ref="searchForm"
                :sort-info="sortInfo"
                :default-class-tree="classList"
                :class-conf="classConf"
                :disabled="false"
                type="d"
            >
            </search-form>
        </div>
        <div class="cp-container bgf p20">
            <el-row v-loading="loading" :gutter="20" class="pannel">
                <el-col v-for="(item, index) in list" :key="index" :span="6">
                    <div class="qual-item">
                        <div class="img-content">
                            <img :src="item.fileShowUrl+`-${index+1}.jpg`" alt="">
                        </div>
                        <p class="title flex flex-center">
                            {{FILTER_FORMATER.wordNum(item.title, 20)}}
                        </p>
                    </div>
                </el-col>
            </el-row>
        </div>
    </section>
</template>

<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator'
import searchForm from '~/components/common/searchForm.vue'

@Component({
    layout: 'institute',
    head () {
        return {
            title: '资质对接-平台建筑研究院'
        }
    },
    components: {
        searchForm
    }
})
export default class PageInstituteQualification extends Vue {
    loading: boolean = false
    total: number = 0
    pageSize: number = 16
    pageNumber: number = 1
    classList: any = [
        {
            id: 1,
            name: '建筑业企业资质'
        }, {
            id: 2,
            name: '工程勘察资质'
        }, {
            id: 3,
            name: '工程监理资质'
        }, {
            id: 4,
            name: '工程设计资质'
        }, {
            id: 5,
            name: '建筑智能化工程设计与施工资质'
        }, {
            id: 6,
            name: '消防设施工程设计与施工资质'
        }, {
            id: 7,
            name: '建筑装饰装修工程设计与施工资质'
        }, {
            id: 8,
            name: '建筑幕墙工程设计与施工资质'
        }, {
            id: 9,
            name: '城市园林绿化企业资质'
        }, {
            id: 10,
            name: '海洋工程勘察资质'
        }
    ]
    classConf: any = {
        label: 'name',
        nodes: 'nodes',
        id: 'id'
    }
    sortInfo: any = [
        {
            label: '发布时间',
            value: 'publishDate'
        },
        {
            label: '截止时间',
            value: 'biddingDeadline'
        }
    ]
    list: any = [
        {title: '防水防腐保温工程专业承包资质', fileShowUrl: '/img/institute/qual/qual'},
        {title: '古建筑工程专业承包资质', fileShowUrl: '/img/institute/qual/qual'},
        {title: '环保工程专业承包企业资质', fileShowUrl: '/img/institute/qual/qual'},
        {title: '机电设备安装工程专业承包企业资质', fileShowUrl: '/img/institute/qual/qual'},
        {title: '建筑幕墙工程专业承包企业资质', fileShowUrl: '/img/institute/qual/qual'},
        {title: '建筑装修装饰工程专业承包企业资质', fileShowUrl: '/img/institute/qual/qual'},
        {title: '模板脚手架专业承包资质', fileShowUrl: '/img/institute/qual/qual'},
        {title: '石油化工工程施工总承包资质', fileShowUrl: '/img/institute/qual/qual'},
        {title: '机电工程施工总承包资质', fileShowUrl: '/img/institute/qual/qual'},
        {title: '建筑工程施工总承包资质', fileShowUrl: '/img/institute/qual/qual'},
        {title: '电力工程施工总承包资质', fileShowUrl: '/img/institute/qual/qual'},
        {title: '市政公用工程施工总承包资质', fileShowUrl: '/img/institute/qual/qual'},
        {title: '通信工程施工总承包资质', fileShowUrl: '/img/institute/qual/qual'},
        {title: '城市及道路照明工程专业承包资质', fileShowUrl: '/img/institute/qual/qual'},
        {title: '地基基础工程资质', fileShowUrl: '/img/institute/qual/qual'},
        {title: '电子与智能化工程专业承包资质', fileShowUrl: '/img/institute/qual/qual'}
    ]
}
</script>
<style lang="scss" scoped>
    .qualification {
        padding: 20px 0 50px;
        background: #f7f7f7;
        .p20{
            padding: 20px;
        }
        .cp-container{
            margin-bottom: 20px;
        }
        .qual-item{
            margin-bottom: 20px;
            border: 1px solid #eee;
            color: #333;
            &:hover{
                box-shadow: 1px 5px 20px #e6e6e6;
            }
            .img-content{
                position: relative;
                width: 100%;
                height: 200px;
                img{
                    width: 100%;
                    height: 100%;
                    //@include imgCenter;
                }
            }
            p{
                width: 100%;
                height: 48px;
                font-size: 16px;
                background: #fff;
            }
        }
    }
</style>
